@charset "utf-8";

.banner{
  // overflow: hidden;
  height: 50px;
  // width: 1180px;
  margin: 0 auto;
  position: relative;
  border-bottom: 1px solid black;
  .banner-box{
    // height: 530px;
    width: 100%;
    margin: 0 auto;
  }
  .category-box{
    height: 530px;
    width: 230px;
    background: rgba(51,51,51,0.7);
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -590px;
    z-index: 5;
    font-size: 16px;
    line-height: 50px;
    text-align: center; 
    &:hover .category-list{
      display: block;
    }
    .category-item{
      text-align: center;
      
      cursor: pointer;
      >a{
        color: #fff;
        width: 75px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        display: block;
        margin: 0 auto;
      }
      
    }
    .item-all{
      background:rgba(51,51,51,1);
    }
    .category-list{
      background:rgba(51,51,51,0.8);
      display: none;
      height: 530px;
      // position: relative;
      .list-item{
        cursor: pointer;
        >a{
          color: #fff;
        }
        
        .right-wrapper{
          height: 530px;
          width: 930px;
          background: #fff;
          position: absolute;
          top: 49px;
          left: 230px;
          box-sizing: border-box;
          box-shadow: 0px 0px 2px rgba(0, 0, 0,.4);
          padding: 20px 20px 20px 0;
          display: none;
          .category-level-box{
            padding-left: 50px;
            max-height: 500px;
            min-height: 340px;
          }
          .level-box{
            float: left;
            width: 165px;
            height: 65px;
            margin-bottom: 20px;
            text-align: left;
            >a{
              display: block;
              width: 165px;
              font-size: 14px;
              &:hover{
                color: #aaa;
              }
            }
            img{
              width: 65px;
              height: 65px;
              margin-right: 5px;
            }
          }
          .roobt{
            width: 100%;
            float: none;
            >a{
              width: 90px;
              text-align: center;
              border-right: 1px solid #333;
              float: left;
            }
            .level-list{
              width: 770px;
              float: left;
              >a{
                width: 30%;
                margin-right: 10px;
                margin-bottom: 20px;
                float: left;
                display: block;
                color: #666;
                &:hover{
                  color: #999;
                }
              }
            }
          }
        }
        &:hover {
          background: rgba(51, 51, 51,.8);
        }
        &:hover .right-wrapper{
          display: block
        };
        
      }
    }
  }
}
.swiper{
  height: 100%;
  position: relative;
  .swiper-wrapper{
    width: 100%;
    height: 100%;
    .swiper-slide{
      a{
        display: block;
        background-size: auto 100%;
        background-position: center top;
        width: 100%;
        height: 100%;
      }
    }
  }
  .swiper-button-prev{
    position: absolute;
    left: 50%;
    margin-left: -360px;
  }
  .swiper-button-next{
    position: absolute;
    right: 50%;
    margin-right: -590px;
  }
}